<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/myblogs.css">
</head>
<body>

<header>
    <nav>
        <a href="/myblogs/add">发布博客</a>
        <a href="/remark">评论管理</a>
        <a href="/user">用户管理</a>
        <!-- 添加更多导航链接 -->
        <div class="search-container">
            <input type="text" name="search" placeholder="搜索博客" id="search_con">
            <input type="submit" value="搜索" id="search_but">
        </div>
    </nav>
</header>

<div class="main art_context" id="art_context">

</div>



    <script>
        $(document).ready(function () {
            loadData()

            // 点击查找
            $("#search_but").click(function () {
                var title = $("#search_con").val()
                $.ajax({
                    url:"/myblogs/find",
                    type:"post",
                    data:{
                        title:title
                    },
                    dataType: "json",
                    success:function (data) {
                        if (Object.keys(data.art).length === 0){
                            loadData()
                        }
                        $("#art_context").empty();
                        $("#search_con").val("");
                        newdata(data)
                    },
                    error:function () {
                        alert("查找失败!")
                    }
                })
            })


            // 点击删除
            $('body').on('click','.del',function (event) {
                event.preventDefault();
                var res = confirm("确定要下架该文章吗？")
                if (res){
                    $.ajax({
                        url: "/myblogs/del",
                        type: "post",
                        data:{
                            id:$(this).parent().attr("data"),
                        },
                        success:function () {
                            alert("删除成功！")
                            window.location.replace("/myblogs")
                        },
                        error:function () {
                            alert("删除失败！")
                        },
                    })
                }
            })
            // 点击修改
            $('body').on('click','.mod',function (event) {
                event.preventDefault();
                var id = $(this).parent().attr("data");
                window.location.href = "/myblogs/update?id="+id
            })
        })

        // 加载页面数据
        function loadData() {
            $.ajax({
                url:"/articles",
                type:"get",
                dataType:"json",  // 后台获取的 json
                success:function (data) {
                    newdata(data)
                },
                error:function () {
                    alert("系统故障，获取不到数据！")
                }
            })
        }

        //  根据不同情况，加载不同 文章数据
        function newdata(data) {
            const artContextDiv = document.getElementById("art_context");
            for (const art of data.art){
                const aTag = document.createElement("div");
                aTag.className = "blog";
                aTag.setAttribute("data", art.id);

                const pTag1 = document.createElement("h2");
                pTag1.className = "blog-title";
                pTag1.textContent = art.title;

                const pTag2 = document.createElement("p");
                pTag2.className = "blog-meta";
                pTag2.textContent = "类型: "+art.type+" | 发布时间: "+art.create_time + " | 最后修改时间: "+art.update_time;

                const pTag5 = document.createElement("div");
                pTag5.className = "blog-actions";
                pTag5.setAttribute("data",art.id)

                const pTag6 = document.createElement("button");
                pTag6.className = "mod";
                pTag6.textContent = "修改";

                const pTag7 = document.createElement("button");
                pTag7.className = "del";
                pTag7.textContent = "删除";

                pTag5.appendChild(pTag6)
                pTag5.appendChild(pTag7)

                aTag.appendChild(pTag1);
                aTag.appendChild(pTag2);
                aTag.appendChild(pTag5);

                artContextDiv.appendChild(aTag);
            }
        }




    </script>
</body>
</html>